<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script src="/front01/js/haha.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.9);
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 450px;
        }

        .login-title {
            text-align: center;
            color: #006064;
            margin-bottom: 2.5rem;
            font-size: 28px;
            font-weight: 600;
        }

        .el-form-item {
            margin-bottom: 1.8rem;
        }

        .el-form-item__label {
            color: #00838f;
            font-weight: 500;
            font-size: 16px;
        }

        .el-input__inner {
            border: none;
            border-bottom: 2px solid #b2ebf2;
            border-radius: 0;
            padding: 12px 0;
            font-size: 16px;
            transition: border-bottom-color 0.3s ease;
        }

        .el-input__inner:focus {
            border-bottom-color: #00838f;
            box-shadow: none;
        }

        .el-button {
            border-radius: 25px;
            padding: 12px 35px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .el-button--primary {
            background: #00838f;
            border-color: #00838f;
            margin-right: 1.5rem;
        }

        .el-button--primary:hover {
            background: #00acc1;
            transform: translateY(-2px);
        }

        .el-button--default {
            background: #e0f7fa;
            color: #00838f;
            border-color: #e0f7fa;
        }

        .el-button--default:hover {
            background: #b2ebf2;
            transform: translateY(-2px);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="login-container">
            <h1 class="login-title">用户登录</h1>
            <el-form :model="loginInfo" :rules="rules" status-icon ref="loginInfo" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="loginInfo.username" autocomplete="off" type="text"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginInfo.password" autocomplete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :plain="true" type="primary" @click="login()">登录</el-button>
                    <el-button @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                loginInfo: {},
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                login() {
                    this.$refs["loginInfo"].validate((valid) => {
                        if (valid) {
                            $.post(BASE_URL + "/emp", app.loginInfo, function (backData) {
                                if (backData.code == 200) {
                                    window.location.href = "main.html"
                                } else {
                                    app.$message({
                                        showClose: true,
                                        message: backData.msg,
                                        type: 'error'
                                    });
                                }

                            });
                        }
                    });
                },
                reset() {
                    this.$refs["loginInfo"].resetFields();
                }
            }
        });
    </script>
</body>

</html>